<template>
  <div class="infinite-container greenTop">
    <ul class="pageTopInfo">
      <li>
        <label class="personName">{{familyPerson.realname}}</label>
        <span>{{detailLists.departmentName}}</span>
      </li>
      <li>
        <label>住院号：</label>
        <span>{{illNum}}</span>
      </li>
      <li>
        <label>住院日期：</label>
        <span>{{detailLists.inDate &&detailLists.inDate.slice(0,10)}} 至 {{detailLists.outDate && detailLists.outDate.slice(0,10)}}</span>
      </li>
    </ul>
    <white-block :head="true">
      <div class="flex flex_between" slot="header">
        <span>费用总额</span>
        <span class="totalFee">{{detailLists.totalFee | fixedMoney}}</span>
      </div>

      <ul class="fee-list bgwhite pd10" slot="content">
          <li v-for="(item, index) in detailLists.dailyList" :key="index">
            <mu-flexbox @click.native="itemHandle(item)">
              <mu-flexbox-item>
                日费用明细
              </mu-flexbox-item>
              <mu-flexbox-item class="text-right">
                <span class="f14">{{item.costDate}}</span>
                <i class="t3 iconfont icon-small-arrow-right" v-show="!item.show"/>
                <i class="t3 iconfont icon-down"  v-show="item.show"/>
              </mu-flexbox-item>
            </mu-flexbox>
            <div class="fee-list-child" v-show="item.show">
              <mu-flexbox v-for="(v, i) in item.costDetail" :key="i" :class="{active: i % 2 === 1}">
                 <mu-flexbox-item :grow="3">
                  <div>{{v.itemName}}</div>
                  <div class="f12">
                    {{v.itemPrice |fixedMoney}} * 
                    {{v.itemNumber}}{{v.itemUnit}}
                  </div>
                </mu-flexbox-item>
                <mu-flexbox-item class="text-right">
                  {{v.itemTotalFee| fixedMoney}}
                </mu-flexbox-item>
              </mu-flexbox>
            </div>
          </li>
        </ul>

    </white-block>
    <p class="bottomTip text-center f12">此费用数据仅供参考，以医院实际费用为准。</p>
  </div>
</template>

<script>
  import whiteBlock from '../../components/whiteBlock'
  import {commonAjax, RESTFUL_API} from '@/api/api'
  export default {
    data () {
      return {
        detailLists: {
          dailyList: []
        },
        familyPerson: JSON.parse(sessionStorage.getItem('familyPerson')),
        illNum: ''
      }
    },
    components: {
      whiteBlock
    },
    mounted () {
      this.illNum = this.$route.query.inHospitalRecordNumber
      this.getDailyRecord()
    },
    methods: {
      itemHandle (value, index) {
        value.show = !value.show
        if (value.costDetail) {
          return
        }
        this.getDaily(value, index)
      },
      getDailyRecord () {
        this.$store.commit('UPDATE_LOADING')
        let param = {
          patientMedicalCardType: 1,
          patientIdentityCardType: this.familyPerson.cardtype,
          patientIdentityCardNumber: this.familyPerson.idcard,
          inHospitalRecordNumber: this.illNum,
          pageNo: 1,
          pageSize: 100
        }
        commonAjax(`${RESTFUL_API.listHospitalizationPaymentDate}`, param, true).then(res => {
          this.$store.commit('UPDATE_LOADING')
          if (res.data.code === 1) {
            let temp = res.data.data[0]
            if (temp.dailyList && temp.dailyList.length > 0) {
              temp.dailyList.forEach(v => { v.show = false })
            }
            this.detailLists = temp
            console.log(this.detailLists)
          }
        })
      },
      getDaily (value, index) {
        this.$store.commit('UPDATE_LOADING')
        let param = {
          patientMedicalCardType: 1,
          patientIdentityCardType: this.familyPerson.cardtype,
          patientIdentityCardNumber: this.familyPerson.idcard,
          inHospitalRecordNumber: this.illNum,
          costDate: value.costDate
        }
        commonAjax(`${RESTFUL_API.listHospitalizationPayment}`, param, true).then(res => {
          this.$store.commit('UPDATE_LOADING')
          if (res.data.code === 1) {
            // value.costDetail = res.data.data
            this.$set(value, 'costDetail', res.data.data)
            this.$set(value, 'open', true)
          }
        })
      }
    }
  }
</script>

<style scoped lang="less">
  @import "../../common/css/flex.css";
  @import "../../common/css/vars";
  .totalFee{
    color:@color-primary
  }
  .pageTopInfo{
    padding:20px 0 10px 20px;
    color:white;
    li{
      display:flex;
    }
    label{
      width:100px;
    }
    label.personName{
      font-size:18px;
    }
  }
  .fee-list {
  >li {
    line-height:40px;
    border-bottom:1px solid #f2f2f2;
  }
}
.fee-list-child {
  padding: 2px 10px 2px 10px;
  font-size: 1em;
  line-height:26px;
  color: #666;
  .active {
    background: #f9f9f9;
  }
}
</style>
